<template>
    <div class="app-container">
        <tree-table :data="datas" :columns="columns" border @selected="getData" >
            <el-table-column label="权限编码" width="300">
                <template slot-scope="scope">
                    <span style="color:sandybrown" v-show="scope.row.type === '01'">{{scope.row.code}}</span>
                </template>
            </el-table-column>
          <el-table-column label="请求方式" >
            <template slot-scope="scope">
              <span style="color:sandybrown" v-show="scope.row.type === '01'">{{scope.row.method}}</span>
            </template>
          </el-table-column>
            <el-table-column label="权限URL" >
                <template slot-scope="scope">
                    <span style="color:sandybrown" v-show="scope.row.type === '01'">{{scope.row.url}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" >
                    <template slot-scope="scope">
                        <div style="text-align:center" >
                            <i class="el-icon-circle-plus" @click="addData(scope.row)" v-show="scope.row.type === '00'" style="margin-right:10px;color:black;cursor:pointer"></i>
                            <i class="el-icon-edit" @click="editData(scope.row)" v-show="scope.row.type === '01'" style="margin-left:10px;margin-right:10px;color:black;cursor:pointer"></i>
                            <i class="el-icon-delete"  @click="deleteData(scope.row)" v-show="scope.row.type === '01'"  style="margin-left:10px;color:black;cursor:pointer"></i>
                        </div>
                    </template>
            </el-table-column>
        </tree-table>
        <el-dialog :title="menuDataName"  :visible.sync="menuDataDialog" center :before-close="handleClose" width="40%">
            <hr style="height:0px;border:none;border-top:0px solid #CCC;margin:0px 0px 20px 0px">
            <el-form :model="form"  ref="form">
                <el-form-item>
                    <el-col :span="11">
                        <el-form-item label="权限名称" :label-width="formLabelWidth" prop="name" >
                            <el-input v-model="form.name" placeholder="填写权限名称(中文)"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2">&nbsp;</el-col>
                    <el-col :span="11">
                        <el-form-item label="权限编码" :label-width="formLabelWidth" prop="code">
                            <el-input v-model="form.code" placeholder="填写权限编码(英文)"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-col :span="11">
                        <el-form-item label="权限URL" :label-width="formLabelWidth" prop="component">
                            <el-input v-model="form.url" placeholder="填写权限过滤URL"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2">&nbsp;</el-col>
                    <el-col :span="11">
                        <el-form-item label="显示顺序" :label-width="formLabelWidth">
                            <el-input v-model="form.orders" placeholder="非必填"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                    <el-table oncontextmenu="self.event.returnValue=false" :data= "permissionData" style="width: 100%" border size="mini" @row-contextmenu="ct">
                        <el-table-column type="index" width="60" label="序号" align="center" >
                        </el-table-column>
                        <el-table-column prop="expname" label="表达式名称">
                            <template slot-scope="scope">
                                <el-input  v-model="scope.row.expname"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="expression" label="表达式" width="180">
                            <template slot-scope="scope">
                                <el-input  v-model="scope.row.expression"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="priority" label="优先级" width="180">
                            <template slot-scope="scope">
                                <el-input  v-model="scope.row.priority"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                <el-dialog
                    title="提示"
                    :visible.sync="centerDialogVisible"
                    width="30%"
                    center>
                    <span>需要注意的是内容是默认不居中的</span>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="centerDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取  消</el-button>
                <el-button type="primary" @click="confirmDialog('form')">提  交</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
import treeTable from '@/components/TreeTable'
import { getObj,addObj,delExp,getExp,addExp } from 'api/menu'
export default {
    name: 'permissionTree',
    components: { treeTable },
    data(){
        return{
          datas:[{'name': '根目录(或者系统名称)', 'code':'系统维护','component':'','icon':'','orders':'','isDisplay':true,'root':true, 'dbid':'0',children:'',type:'00'}],
            form: {
                parentId: '',
                name: undefined,
                code: undefined,
                url: undefined,
                icon: '',
                orders: '',
                isDisplay: '1',
                type:''
            },
            formLabelWidth:'80px',
            menuDataName:'',
            menuDataDialog:false,
            node:{},
            formEdit:false,
            permissionData:[{'dbid':undefined,'expname':'','expression':'','priority':'','permissionid':''},
                    {'dbid':undefined,'expname':'','expression':'','priority':'','permissionid':''},{'dbid':undefined,'expname':'','expression':'','priority':'','permissionid':''},
                    {'dbid':undefined,'expname':'','expression':'','priority':'','permissionid':''},{'dbid':undefined,'expname':'','expression':'','priority':'','permissionid':''}
                ],
            type: '',
            centerDialogVisible:false
        }
    },
    methods:{
        ct(row,event){
            console.log(row)
            console.log(event)
            event.preventDefault()
            let x = event.clientX;
            let y = event.clientY;
            this.centerDialogVisible = true
        },
        getData(node){
            let that_ = this;
            getObj(node.dbid,'00').then( res => {
                getObj(node.dbid, '01').then( ress => {
                    that_.$set(node, 'children', ress.data.concat(res.data))
                })
            })
        },
        getExpressionData(id){
            let that_ = this
            getExp(id).then(res =>{
                that_.permissionData = [{'dbid':'','expname':'','expression':'','priority':'','permissionid':''},
                        {'dbid':'','expname':'','expression':'','priority':'','permissionid':''},{'dbid':'','expname':'','expression':'','priority':'','permissionid':''},
                        {'dbid':'','expname':'','expression':'','priority':'','permissionid':''},{'dbid':'','expname':'','expression':'','priority':'','permissionid':''}
                    ];
                if(res.data.length>0){
                    for(let i=0; i< res.data.length; i++){
                        that_.permissionData[i] = res.data[i];
                    }
                }else{
                }
                that_.menuDataDialog = true;
            })
        },
        addData(node){
            this.menuDataDialog = true;
            this.menuDataName = "新增权限";
            this.form = {name:'',code: '',url: '',icon: '',orders: '',isDisplay: '1',parentId:node.dbid,type:'01'}
            this.node = node;
            this.permissionData = [{'dbid':'','expname':'','expression':'','priority':'','permissionid':''},
                    {'dbid':'','expname':'','expression':'','priority':'','permissionid':''},{'dbid':'','expname':'','expression':'','priority':'','permissionid':''},
                    {'dbid':'','expname':'','expression':'','priority':'','permissionid':''},{'dbid':'','expname':'','expression':'','priority':'','permissionid':''}
                ];
        },
        editData(node){
            this.menuDataName = "编辑权限";
            this.form = {dbid:node.dbid,name:node.name, code: node.code,url:node.url,component: node.component,icon: node.icon,orders: node.orders,isdisplay: node.isDisplay==true?'1':'0',parentId: node.parentId,type:'01'}
            this.node = node.parent;
            this.getExpressionData(node.dbid);
        },
        deleteData(node){
            let that_ = this;
            that_.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delExp(node.dbid).then(res => {
                    that_.reload(node.parent)
                    that_.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
            }).catch(() => {
                that_.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        confirmDialog(name){
            let node = this.node;
            let that_=this;
            that_.$refs[name].validate(function(valid){
                if (valid) {
                    that_.$confirm('确认提交？')
                    .then(_ => {
                        addObj(that_.form).then(res => {
                            that_.menuDataDialog = false;
                            let temp = ArrayIsNUll(that_.permissionData, res.data.dbid)
                            addExp(temp).then(res2 => {
                              that_.$message({
                                type: 'success',
                                message: '操作成功'
                              });
                            })
                            that_.reload(node)
                        })
                    })
                }
            })
        },
        closeDialog(){
            this.$confirm('确认关闭此窗口(未保存数据将消失)？')
            .then(_ => {
               this.menuDataDialog = false;
            }).catch(_ => {});
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            }).catch(_ => {});
        },
        reload(node) {
            //刷新节点
            if (node.children) {
                node.children.splice(0, node.children)
            }
            this.getData(node);
        },
    },
    computed: {
        columns(){
            let cols = [];
            cols.push({
                    text: '名称',
                    align:'center',
                    value: 'name',
                    width: '300px'
                });
            return cols;
        }
    }
}
function ArrayIsNUll(array, id){
    let data = [];
    for(let i=0; i< array.length; i++){
        let item = array[i]
        let flag = false;
        for(let key in item){
            if(item[key] !== ""){
                flag = true
            }
        }
        if(flag){
            item['permissionid'] = id
            data.push(item)
        }
    }
    return data;
}
</script>
<style>
.el-table th>.cell {
    position: relative;
    word-wrap: normal;
    text-overflow: ellipsis;
    vertical-align: middle;
    width: 100%;
    box-sizing: border-box;
    text-align: center !important;
}
.el-select {
    display: flex!important;
    position: relative!important;
}
/*.el-dialog--center .el-dialog__header {
    padding-top: 15px!important;
    background: Lavender
}*/
.el-dialog--center .el-dialog__body {
    text-align: initial;
    padding: 0px 27px 10px!important;
}
.el-dialog--center .el-dialog__footer {
    text-align: inherit;
    padding-bottom: 15px!important;
}
.el-dialog__title {
    line-height: 24px;
    font-size: 22px;
    color: #2d2f33;
    border: 2px;
}
</style>
